<script lang="ts" setup>
import { SearchParams } from "../data";

defineProps({
	institutionList: {
		type: Array<{ id: number; name: string }>,
		default: () => [],
		required: true,
	},
});

const searchData = () => {
	return {
		name: "",
		phone: "",
		institutionId: "",
	};
};
const model = ref<SearchParams>(searchData());

const emit = defineEmits<{
	(e: "search", val: SearchParams): void;
}>();

const onSearch = () => {
	emit("search", model.value);
};
const onRest = () => {
	model.value = searchData();
	emit("search", model.value);
};
</script>
<template>
	<el-card shadow="never" style="margin-bottom: 14px">
		<el-row justify="space-between">
			<div class="search-box">
				<el-form :inline="true" :model="model" class="demo-form-inline" label-width="100px">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="营养师姓名：">
								<el-input
									v-model="model.name"
									style="width: 100%"
									placeholder="请输入营养师姓名"
								></el-input></el-form-item
						></el-col>
						<el-col :span="8">
							<el-form-item label="联系电话：">
								<el-input
									v-model="model.phone"
									style="width: 100%"
									placeholder="请输入联系电话"
								></el-input></el-form-item
						></el-col>
						<el-col :span="8">
							<el-form-item label="执业机构：">
								<el-select v-model="model.institutionId" placeholder="请选择执业机构" style="width: 100%">
									<el-option v-for="item in institutionList" :key="item.id" :label="item.name" :value="item.id" />
								</el-select> </el-form-item
						></el-col>
					</el-row>
				</el-form>
			</div>
			<div class="search-box-btn">
				<el-space direction="vertical">
					<el-button type="primary" @click="onSearch"
						><template #icon><IconSvg name="search" :iconStyle="{ width: '80px', height: '80px' }" /></template
						>查询</el-button
					>
					<el-button @click="onRest">
						<template #icon><IconSvg name="rest" /></template>重置</el-button
					>
				</el-space>
			</div>
		</el-row>
	</el-card>
</template>

<style scoped>
.demo-form-inline .el-form-item {
	width: 100%;
	margin-bottom: 0;
}
</style>
